<template>
    <div class="app-container">
        <div class="filter-container" style="margin: 10px 0 10px 0;">
            <el-input clearable class="filter-item" style="width: 200px;" v-model="queryParam.text"  placeholder="请输入评论内容"></el-input>
            <el-input clearable class="filter-item" style="width: 150px;" v-model="queryParam.author" placeholder="请输入评论人"></el-input>
            <el-input clearable class="filter-item" style="width: 150px;" v-model="queryParam.title" placeholder="请输入评论文章"></el-input>



            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="query()">查找</el-button>
            <el-button class="filter-item" type="danger"  icon="el-icon-delete" >删除选中</el-button>
        </div>
        <el-table :data="comments.comment"  style="width: 100%" @selection-change="handleSelectionChange" >
            <el-table-column type="selection"></el-table-column>
            <el-table-column label="序号" width="60" align="center">
                <template  #default="scope">
                    <span >{{scope.$index + 1}}</span>
                </template>
            </el-table-column>

            <el-table-column label="头像" width="160" align="center">
                <template #default="scope">
                    <img
                            v-if="scope.row.url"
                            :src="scope.row.url"
                            onerror="onerror=null;src=url"
                            style="width: 100px;height: 100px;"
                    >
                    <img
                            v-else
                            :src="url"
                            style="width: 100px;height: 100px;"
                    >
                </template>
            </el-table-column>
            <el-table-column label="评论文章" width="160" align="center">
                <template #default="scope">
                    <span >{{ scope.row.title }}</span>
                </template>
            </el-table-column>

            <el-table-column label="评论人" width="150" align="center">
                <template  #default="scope">
                    <el-tag type="primary" v-if="scope.row.author"  style="cursor: pointer;">{{ scope.row.author }}</el-tag>
                </template>
            </el-table-column>

            <el-table-column label="被评论人" width="150" align="center">
                <template  #default="scope">
                    <el-tag type="primary" v-if="scope.row.ownerId"  style="cursor: pointer;">{{ scope.row.ownerId }}</el-tag>
                </template>
            </el-table-column>

            <el-table-column label="评论时间" width="160" align="center">
                <template #default="scope">
                    <span >{{ scope.row.created }}</span>
                </template>
            </el-table-column>

            <el-table-column label="评论内容" width="200" align="center">
                <template #default="scope">
                    <span >{{ scope.row.text }}</span>
                </template>
            </el-table-column>

            <el-table-column label="操作" fixed="right" min-width="160">
                <template #default="scope">
                    <el-button  type="primary" size="small" >编辑</el-button>
                    <el-button  type="danger" size="small" @click="delOneComment(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页-->
        <div class="block">
            <el-pagination
                    @current-change=getComments
                    :current-page.sync="currentPage"
                    :page-size="PageSize"
                    layout="total, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import {getCommentsPage,delComment,queryComment} from '@/api/comment'
    import {ref,reactive} from 'vue';
    import { ElMessage } from 'element-plus';
    import { useRouter, useRoute } from 'vue-router';
    export default {
        name: "评论管理",
        setup(){
            const current =ref(1);
            const total =ref(0);
            const PageSize=ref(0);
            const comments= reactive({comment:[]});

            // const queryParams=reactive({queryParam:[title,author,text]});
            const url =ref("http://img.rui61.cn/images/2020/07/11/1.md.jpg");
            getComments(1);
            function  getComments(current){
                getCommentsPage(current).then(res=>{
                    total.value = res.data.data.total;
                    PageSize.value =res.data.data.size;
                    comments.comment =res.data.data.records;

                })

            }
            //查询
            const queryParam=reactive({
                title:'',author:'',text:'',currentPage:'',type:"0"
            });
            function query() {
                queryParam.currentPage=current.value;
                queryComment(queryParam).then(res=>{
                    total.value = res.data.data.total;
                    PageSize.value =res.data.data.size;
                    comments.comment =res.data.data.records;
                })
            }
            const router = useRouter();
            //根据id删除一条评论
            function delOneComment(row) {
                delComment(row.coid).then(res=>{
                    const data=res.data.success;
                    if (data){
                        ElMessage.success({
                            message: '删除评论成功',
                            type: 'success'
                        });
                        getComments(1);
                    }else{
                        ElMessage.error('删除评论失败');
                    }
                })
            }
            return {current,total,PageSize,comments,url,getComments,delOneComment,queryParam,query}
        }


    }
</script>

<style scoped>

</style>